<!-- 登录模板 -->
<template>
	<view class="jbs__container flexbox flex-col">
		<view class="jbs__scrollview flex1">
			<view class="lgreg__wrapper">
				<view class="lgreg__tit">登录剧本杀</view>
				<view class="lgreg__form">
					<view class="lgreg__form-item">
						<input v-model="formObj.tel" class="lgreg__form-iptxt lgreg__form-ico--tel" type="number" maxlength="11" placeholder="请输入手机号" placeholder-style="color:#b3b3b3;" />
					</view>
					<!-- 验证码 -->
					<view v-show="vcodeLG" class="lgreg__form-item">
						<input v-model="formObj.vcode" class="lgreg__form-iptxt lgreg__form-ico--vcode" placeholder="请输入验证码" placeholder-style="color:#b3b3b3;" />
						<button class="lgreg__form-vcode" :disabled="disabled" @click.prevent="getVcode">{{vcodeText}}</button>
					</view>
					<!-- 密码 -->
					<view v-show="!vcodeLG" class="lgreg__form-item">
						<input v-model="formObj.pwd" class="lgreg__form-iptxt lgreg__form-ico--pwd" password placeholder="请输入密码" placeholder-style="color:#b3b3b3;" />
					</view>
					<button class="lgreg__form-btn" @click="handleSubmit">登录</button>
				</view>
				<view class="lgreg__agree flexbox" @click="agree = !agree">
					<view class="lgreg__agree-chkbox" :class="{'on': agree}"></view>
					我已经阅读并同意<text class="c-f7482e" @click.stop="isVisibleAgree=true">剧本杀用户协议</text>和<text class="c-f7482e" @click.stop="isVisibleAgree=true">隐私政策</text>
				</view>
				<view class="lgreg__links flexbox">
					<navigator url="/pages/auth/register" hover-class="none" class="lk">注册账号</navigator>
					<text class="lk" @click="changeLgWay">{{vcodeLG ? '密码登录' : '短信登录'}}</text>
					<navigator url="/pages/auth/forgetpwd" hover-class="none" class="lk" style="color: #999;">忘记密码?</navigator>
				</view>
				<view class="lgreg__otherway flexbox">
					<image src="/static/icon-lg-wx.png" mode="aspectFill" @click="wxLogin" />
				</view>
			</view>
		</view>
		
		<!-- 协议弹框 -->
		<ua-popup v-model="isVisibleAgree">
			<view class="uapopup__agree">
				<view class="uapopup__agree-title">使用条款及隐私政策</view>
				<view class="uapopup__agree-scroll">
					<view class="uapopup__agree-item">请您本产品之前，请务必仔细阅读并理解《用户许可使用协议》（以下简称“本协议”）中规定的多有权利和限制。</view>
					<view class="uapopup__agree-item">我们一向尊重并会严格保护用户在使用本产品时的合法权益（包括用户隐私、用户数据等）不受到任何侵犯。</view>
					<view class="uapopup__agree-item">本协议（包括本文最后部分的隐私政策）是用户（包括通过各种合法途径获取到本产品的自然人、法人或其他组织机构，以下简称“用户”或“您”）与我们之间针对本产品相关事项最终的、完整的且排他的协议，并取代、合并之前的当事人之间关于上述事项的讨论和协议。</view>
					<view class="uapopup__agree-item">本协议将对用户使用本产品的行为产生法律约束力，您已承诺和保证有权利和能力订立本协议。用户开始使用本产品将视为已经接受本协议，请认真阅读并理解本协议中各种条款，包括免除和限制我们的免责条款和对用户的权利限制（未成年人审阅时应由法定监护人陪同），如果您不能接受本协议中的全部条款，请勿开始使用本产品。</view>
				</view>
				<view class="uapopup__agree-btn accept" style="margin-top: 30rpx;" @click="isVisibleAgree=false, agree=true">同意</view>
				<view class="uapopup__agree-btn" @click="isVisibleAgree=false, agree=false">我再想想</view>
			</view>
		</ua-popup>
	</view>
</template>

<script>
	import { checkTel } from '@/utils'
	
	export default {
		data() {
			return {
				formObj: {},
				
				vcodeText: '获取验证码',
				disabled: false,
				time: 0,
				
				// 同意协议
				agree: false,
				// 协议弹框
				isVisibleAgree: false,
				// 登录方式切换(短信登录/密码登录)
				vcodeLG: true,
			}
		},
		onLoad() {
			
		},
		methods: {
			// 切换登录方式(短信登录/密码登录)
			changeLgWay() {
				this.vcodeLG = !this.vcodeLG
			},
			
			// Toast提示
			Toast(str, icon = 'none') {
				uni.showToast({
					icon: icon,
					title: str,
				})
			},
			
			// 提交验证
			handleSubmit() {
				console.log('表单数据', this.formObj)
				
				let { tel, vcode, pwd } = this.formObj
				if(!this.agree) {
					this.Toast('请先同意用户协议')
				}else {
					if(!checkTel(tel)) {
						this.Toast('手机号不正确')
					}else if(this.vcodeLG && !vcode) {
						this.Toast('验证码不能为空')
					}else if(!this.vcodeLG && !pwd){
						this.Toast('密码不能为空')
					}else {
						if(this.vcodeLG) {
							// console.log('短信登录验证')
							this.$api.mobileLogin({mobile: tel, captcha: vcode}).then(res => {
								if(res.code == 1) {
									uni.setStorageSync('userinfo', res.data)
									uni.showToast({
										icon: 'none',
										title: res.msg,
										complete() {
											uni.reLaunch({
												url: '/pages/index/index'
											})
										}
									})
								}
							})
						}else {
							// console.log('密码登录验证')
							this.$api.login({account: tel, password: pwd}).then(res => {
								if(res.code == 1) {
									uni.setStorageSync('userinfo', res.data)
									uni.showToast({
										icon: 'none',
										title: res.msg,
										complete() {
											uni.reLaunch({
												url: '/pages/index/index'
											})
										}
									})
								}
							})
						}
					}
				}
			},
			
			// 60s倒计时
			getVcode() {
				let { tel } = this.formObj
				if(!checkTel(tel)) {
					this.Toast('手机号不正确')
				}else {
					// 发送短信验证码
					this.$api.sendSMS({mobile: tel, event: ''}).then(res => {
						if(res.code == 1) {
							uni.showToast({
								icon: 'none',
								title: '验证码已发送，请注意查收',
								position: 'bottom'
							})
							// 开始倒计时
							this.time = 60
							this.disabled = true
							this.countDown()
						}else {
							this.Toast(res.msg)
						}
					})
				}
			},
			countDown() {
				if(this.time > 0) {
					this.vcodeText = `获取验证码(${this.time})`
					this.time--
					setTimeout(this.countDown, 1000)
				}else {
					this.vcodeText = '获取验证码'
					this.time = 0
					this.disabled = false
				}
			},
			
			// 第三方登录(微信登录)
			wxLogin() {
				// #ifdef MP-WEIXIN
				// 验证是否有获取用户信息权限
				uni.getSetting({
					success: (res) => {
						if(res.authSetting['scope.userInfo']) {
							// 调起微信授权
							wx.getUserProfile({
								desc: '获取用户信息用于完善个人资料',
								lang: 'zh_CN',
								success: (res) => {
									console.log('获取微信用户信息：', res.userInfo)
									uni.navigateTo({
										url: '/pages/auth/bindtel?userinfo' + res.userInfo
									})
								}
							})
						}else {
							uni.showModal({
								title: '提示',
								content: '获取用户信息未授权，请在设置界面打开相关权限',
								success: (res) => {
									if(res.confirm) {
										uni.openSetting()
									}
								}
							})
						}
					}
				})
				// #endif
				
				// APP第三方登录
				// #ifdef APP-PLUS
				uni.getProvider({
					service: 'oauth',
					success: (res) => {
						console.log(res.provider)
						
						if(~res.provider.indexOf('weixin')) {
							uni.login({
								provider: 'weixin',
								success: (res1) => {
									console.log('微信登录授权成功：', res1)
									// 请求登录接口
									this.getLoginData(res1)
								},
								fail: (error) => {
									console.log('微信登录授权失败：', error)
								}
							})
						}
					}
				})
				// #endif
			},
			getLoginData(data) {
				console.log('-=-=-=-=-=', data)
				uni.navigateTo({
					url: '/pages/auth/bindtel'
				})
			}
		}
	}
</script>

<style>
	
</style>
